<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>username: <input type="text" id="d1"></p>
<p>password: <input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">点我</button>

<script>
    // 点击发送普通键值对和文件数据
    $('#d4').on('click', function() {
        let formData = new FormData();
        // 添加普通的键值对
        formData.append('username', $('#d1').val());
        formData.append('password', $('#d2').val());
        formData.append('myfile', $('#d3')[0].files[0])
       $.ajax({
            url: '',
           type: 'post',
           data: formData,

           // ajax发送文件必须制定的两个参数 contentType: false
           contentType: false,  // 不需要使用任何编码 django后端能够自动识别FormData对象
           processData: false,  // 告诉浏览器不要对你的数据进行任何处理

           success: function(args) {

           }
       }) ;
    });
</script>
</body>
</html>